import React from "react";
import "./index.less";
import { Menu, Icon } from "antd";
import MenuConfig from "@/config/menuConfig.js";
import { NavLink } from "react-router-dom";

const SubMenu = Menu.SubMenu;

export default class Navleft extends React.Component {
  //构造器
  constructor() {
    super();
    this.state = {};
  }

  //生命周期
  componentWillMount() {
    const menuTree = this.renderMenu(MenuConfig);
    this.setState({
      menuTree
    });
  }

  //菜单渲染
  //map 返回一个新数组,不改变原来的值
  renderMenu = data => {
    return data.map(item => {
      if (item.children) {
        return (
          //如果有自子节点，继续递归遍历直到没有子节点
          <SubMenu title={item.title} key={item.key}>
            {this.renderMenu(item.children)}
          </SubMenu>
        );
      }
      //渲染菜单
      return (
        <Menu.Item title={item.title} key={item.key}>
          <NavLink to={item.key}>{item.title}</NavLink>
        </Menu.Item>
      );
    });
  };
  render() {
    return (
      <div className="logo">
        <img src="../../../src/img/logo-ant.svg" alt="" />
        <h1>后台管理系统</h1>
        <Menu theme="dark">{this.state.menuTree}</Menu>
      </div>
    );
  }
}
